<template>
  <!-- <el-dialog
    ref="refDlg"
    title="导出"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    append-to-body
    width="80%"
    @close="closeDialog"
  > -->
  <div>
    <div style="text-align:right;margin:10px auto">
      <el-button type="primary" @click="submitForm">下载pdf</el-button>
    </div>
    <div v-if="acceptType==='rectify'" id="rectify-pdf">
      <div style="font-size:24px;text-align:center;font-weight:bold;height:40px">{{ detail.shopName }}软装验收整改指令单</div>
      <table border="1" width="100%" cellspacing="0">
        <tr>
          <!-- <th align="right">责任归属</th> <td align="left">{{ item.belongDuty }}</td> -->
          <th align="right">验收日期</th>  <td align="left">{{ formateTime(rectifyObj.actualAcceptTime) }}</td>
          <th align="right">应整改完成时间</th>  <td align="left">{{ formateTime(rectifyObj.mustRectifyEndTime) }}</td>
        </tr>
        <tr>
          <th align="right">成品客户经理</th> <td align="left">{{ rectifyObj.name1 }}</td>
          <th align="right">定制客户经理</th>  <td align="left">{{ rectifyObj.name2 }}</td>
        </tr>
        <!-- <tr>
            <th align="right">责任人</th> <td align="left">{{ item.principalName }}</td>
          </tr> -->
      </table>
      <div class="problem_box">
        <el-table size="medium" border :data="rectifyObj.newProblemList" style="width: 100%">
          <el-table-column prop="problemClass" label="项目性质" width="110" />
          <el-table-column prop="agencyProblemDesc" label="经销商责任">
            <template slot-scope="scope">
              <span style="white-space:pre-wrap"> {{ scope.row.agencyProblemDesc }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="companyProblemDesc" label="公司责任项目">
            <template slot-scope="scope">
              <span style="white-space:pre-wrap"> {{ scope.row.companyProblemDesc }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin:20px 0 100px 0">
        <div style="display:flex">
          <h2>专卖店考核：</h2><h2 align="left">若未在___________________________前完成整改，将会影响您的返利开始时间，请知晓。</h2>
        </div>
        <div style="display:flex;justify-content: space-between;width:60%">
          <h2>经销商签字:</h2>
          <h2>整体完成整改时限：</h2>
        </div>
        <!-- <tr>
          <th>专卖店考核:</th><td align="left">若未在_____________________前完成整改，将会影响您的返利开始时间，请知晓。</td>
        </tr>
        <tr>
          <th>经销商签字:</th>
          <th>整体完成整改时限：</th>
        </tr> -->
      </div>
    </div>

    <div v-else id="test-pdf">
      <div style="font-size:24px;text-align:center;font-weight:bold;height:40px">{{ acceptType==='SOFT'?'软装验收报告单':'硬装验收报告单' }}</div>
      <table width="100%">
        <tr class="bgc"> <th colspan="6">申请人信息</th>  </tr>
        <tr>  <th align="right">申请人</th> <td align="left">{{ detail.applyInformantName }}</td>
          <th align="right">申请人电话</th>  <td align="left">{{ detail.phone }}</td>
          <th align="right">申请时间</th>  <td align="left">{{ formateTime( detail.applyReportTime) }}</td>
        </tr>
        <tr>
          <th align="right">申请人部门</th>
          <td align="left" colspan="6">{{ handlerOrg(detail.orgDtos) }}</td>
        </tr>
        <tr class="bgc"><th colspan="6">门店信息</th> </tr>
        <tr>
          <th align="right">所属办事处</th><td align="left">{{ detail.officeName }}</td>
          <th align="right">办事处性质</th><td align="left">{{ detail.officeNature }}</td>
          <th align="right">商家类别</th><td align="left">{{ formaterData(bizmanTypeList,detail.bizmanType) }}</td>
        </tr>
        <tr><th align="right">经销商姓名</th><td align="left">{{ detail.customerName }}</td>
          <th align="right">经销商电话</th><td colspan="4" align="left">{{ detail.customerPhone }}</td>
        </tr>
        <tr><th align="right">客户编码</th><td align="left">{{ detail.clientCode }}</td>
          <th align="right">客户名称</th> <td align="left" colspan="3">{{ detail.clientName }}</td>
        </tr>
        <tr><th align="right">门店编码</th><td align="left">{{ detail.shopCode }}</td>
          <th align="right">门店名称</th> <td align="left" colspan="3">{{ detail.shopName }}</td>
        </tr>
        <tr><th align="right">门店档案面积</th><td align="left">{{ detail.shopArea!==undefined?(detail.shopArea+'㎡'):'' }}</td>
          <th align="right">门店详细地址</th> <td align="left" colspan="3">{{ detail.shopAddress }}</td>
        </tr>
        <tr>
          <th align="right">门店类型</th><td align="left">{{ formaterData(shopTypeList,detail.shopType) }}</td>
          <th align="right">城市级别</th><td align="left" colspan="3">{{ formaterData(cityLevelList,detail.shopCityLevel) }}</td>
          <!-- <th align="right">市场层级</th><td align="left">{{ formaterData(marketLevelList,detail.shopMarketLevel) }}</td> -->
        </tr>
        <tr><th align="right">门店营业状态</th><td align="left">{{ formaterData(businessStatusList,detail.businessStatus) }}</td>
          <th align="right">业务类型</th> <td align="left" colspan="3">{{ formaterData(bizTypeList,detail.shopBizType) }}</td>
        </tr>
        <tr class="bgc"><th colspan="6">门店建设信息</th> </tr>
        <tr>
          <th align="right">门店建设项目号</th><td align="left">{{ detail.constCode }}</td>
          <th align="right">报图类型</th><td align="left">{{ formaterData( marketTypeList,detail.marketType) }}</td>
          <th align="right">门店建设类型</th><td align="left">{{ formaterData(constTypeList,detail.constType) }}</td>
        </tr>
        <tr>
          <th align="right">门店建设范围</th><td align="left">{{ formaterData(constRangeList,detail.decorationRange) }}</td>
          <th align="right">装修形式</th><td colspan="4" align="left">{{ formaterData(decorationFormList,detail.decorationFormCal) }}</td>
        </tr>
        <tr class="bgc"><th colspan="6">验收基础信息</th> </tr>
        <tr>
          <th align="right">验收项目号</th><td align="left">{{ detail.acceptTaskCode }}</td>
          <th align="right">对应硬装验收任务号</th><td align="left">{{ detail.upAcceptTaskCode }}</td>
          <th align="right">本次验收范围</th><td align="left">{{ formaterData(constRangeList,detail.range) }}</td>
        </tr>
        <tr>
          <th align="right">是否含公装</th><td align="left">{{ detail.haveFrock!==undefined?( detail.haveFrock?'是':'否'):'' }}</td>
          <th align="right">验收进度</th><td align="left" colspan="3">{{ formaterData(checkScheduleList,detail.acceptSchedule) }}</td>
          <!-- <th align="right">验收步骤</th><td align="left">{{ formaterData(checkStepList,detail.acceptSteps) }}</td> -->
        </tr>
        <tr>
          <th align="right">工程监理</th><td align="left">{{ detail.proSupervisorName }}</td>
          <th align="right">形象督导</th><td colspan="4" align="left">{{ detail.formSupervisorName }}</td>
        </tr>
        <tr>
          <th align="right">施工单位负责人</th><td align="left">{{ detail.principal }}</td>
          <th align="right">施工单位</th><td colspan="4" align="left">{{ detail.constUnitName }}</td>
        </tr>
        <tr>
          <th align="right">报图时间</th><td align="left">{{ formateTime(detail.passingDate) }}</td>
          <th align="right">设计完成时间</th><td colspan="4" align="left">{{ formateTime(detail.completeTime) }}</td>
        </tr>
        <tr class="bgc"><th colspan="6">验收执行信息</th> </tr>
        <!-- 软装验收 -->
        <tr v-show="$route.query.type==='SOFT'">
          <th align="right">门头装修总面积</th><td align="left">{{ detail.dheadDecorationTotalArea!==undefined?(detail.dheadDecorationTotalArea+'㎡'):'' }}</td>
          <th align="right">卖场装修总面积</th><td align="left">{{ detail.shopDecorationTotalArea!==undefined?(detail.shopDecorationTotalArea+'㎡'):'' }}</td>
          <th align="right">预计验收时间</th><td align="left">{{ formateTime(detail.exceptAcceptTime) }}</td>
        </tr>
        <tr v-show="$route.query.type==='SOFT'">
          <th align="right">验收门头总面积</th><td align="left">{{ detail.acceptDheadTotalArea!==undefined?(detail.acceptDheadTotalArea+'㎡'):'' }}</td>
          <th align="right">验收卖场总面积</th><td align="left">{{ detail.acceptShopTotalArea!==undefined?(detail.acceptShopTotalArea+'㎡'):'' }}</td>
          <th align="right">实际验收时间</th><td align="left">{{ formateTime(detail.actualAcceptTime) }}</td>
        </tr>
        <tr v-show="$route.query.type==='SOFT'">
          <th align="right">验收项目专员</th>
          <td align="left" colspan="6">{{ detail.accepterName }}</td>
        </tr>
        <tr v-if="$route.query.type==='SOFT'">
          <th width="200px" align="right">异常申请确认</th>
          <td align="left" style="white-space:pre-wrap" colspan="5">{{ detail.abnormalConfirmation }}</td>
        </tr>

        <!-- 硬装验收 -->
        <tr v-show="$route.query.type==='HARD'">
          <th align="right">验收门头总面积</th><td align="left">{{ detail.acceptDheadTotalArea!==undefined?(detail.acceptDheadTotalArea+'㎡'):'' }}</td>
          <th align="right">验收卖场总面积</th><td align="left">{{ detail.acceptShopTotalArea!==undefined?(detail.acceptShopTotalArea+'㎡'):'' }}</td>
          <th align="right">验收整装总面积</th><td align="left">{{ detail.acceptWholeTotalArea!==undefined?(detail.acceptWholeTotalArea+'㎡'):'' }}</td>
        </tr>
        <tr v-show="$route.query.type==='HARD'">
          <th align="right">非本次验收门头总面积</th><td align="left">{{ detail.unAccDheadArea !==undefined?(detail.unAccDheadArea+'㎡'):'' }}</td>
          <th align="right">非本次验收卖场总面积</th><td align="left">{{ detail.unAccShopArea !==undefined?(detail.unAccShopArea+'㎡'):'' }}</td>
          <th align="right">预计验收时间</th><td align="left">{{ formateTime(detail.exceptAcceptTime) }}</td>
        </tr>
        <tr v-show="$route.query.type==='HARD'">
          <th align="right">实际验收时间</th><td align="left">{{ formateTime(detail.actualAcceptTime) }}</td>
          <th align="right">验收项目专员</th>
          <td align="left" colspan="4">{{ detail.accepterName }}</td>
        </tr>
        <tr v-if="$route.query.type==='HARD'">
          <th align="right">本次装修业务类型</th>
          <td align="left" style="white-space:pre-wrap" colspan="5">{{ formaterData(shopBizTypeOptions,detail.decorationBizType) }} </td>
        </tr>
        <tr v-if="$route.query.type==='HARD'">
          <th align="right">验收面积汇总</th>
          <td align="left" style="white-space:pre-wrap" colspan="5">{{ detail.areaSummaryDesc }}</td>
        </tr>
        <tr v-if="$route.query.type==='HARD'">
          <th align="right">门楣核算</th>
          <td align="left" style="white-space:pre-wrap" colspan="5">{{ detail.lintelAccounting }}</td>
        </tr>
        <tr v-if="$route.query.type==='HARD'">
          <th width="200px" align="right">异常申请审核结果</th>
          <td align="left" style="white-space:pre-wrap" colspan="5">{{ detail.exceptionVerifyResult }}</td>
        </tr>

        <tr v-show="problemList.length>0" class="bgc"><th colspan="6">验收问题明细</th> </tr>
      </table>
      <!-- 以下为验收问题明细，可有多条数据 -->
      <!-- <div colspan="6">验收问题明细</div> -->

      <div v-for="(item,index) in problemList" :key="index" class="problem_box" width="100%">
        <table border="1" width="100%" cellspacing="0">
          <tr>
            <th align="right">责任归属</th> <td align="left">{{ item.belongDuty }}</td>
            <th align="right">验收结果</th>  <td align="left">{{ formaterData(acceptList ,item.acceptResult) }}</td>
          </tr>
          <tr>
            <th align="right">责任人</th> <td align="left">{{ item.principalName }}</td>
            <th align="right">应整改完成时间</th>  <td align="left">{{ formateTime(item.mustRectifyEndTime) }}</td>
          </tr>
        </table>
        <el-table size="medium" border :data="item.configAcceptProblemDtos||item.problemDetailDTOList" style="width: 100%">
          <el-table-column prop="problemClass" label="问题分类" width="110" />
          <el-table-column prop="haveProblem" label="是否存在问题" width="150">
            <template slot-scope="scope"> {{ scope.row.haveProblem===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="problemDesc" label="验收问题说明">
            <template slot-scope="scope">
              <span style="white-space:pre-wrap"> {{ scope.row.problemDesc }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="rectifyDesc" label="整改项说明">
            <template slot-scope="scope">
              <span style="white-space:pre-wrap"> {{ scope.row.rectifyDesc }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin:30px 0 100px 0" width="100%">
        <!-- <tr>
          <th>专卖店考核:</th><td align="left">若未在_____________________前完成整改，将会影响您的返利开始时间，请知晓。</td>
        </tr> -->
        <div style="display:flex;justify-content: space-between;width:60%">
          <h2>{{ acceptType==='SOFT'?'验收专员':'装修方' }}签字:</h2>
          <h2>{{ acceptType==='SOFT'?'形象督导':'工程监理' }}签字:</h2>
        </div>
        <div style="display:flex;justify-content: space-between;width:60%">
          <h2>经销商签字:</h2>
          <h2>{{ acceptType!=='SOFT'?'验收专员签字:':'' }}</h2>
        </div>
      </div>
      <div style="height:100px" />
    </div>

  </div>
  <!-- </el-dialog> -->
</template>

<script>
import { searchDesignTime } from '@/api/common'
import { getDictByPatchType } from '@/api/dataDict'
// import {  } from '@/api/check'
import { getSoftDetail, getApplyDetail, getProblemDetailList, getDutyAndProblemlist, getSoftProblemList } from '@/api/check'
import { formaterData } from '@/utils/index'
import { searchBizAccount, searchManagerAccount } from '@/api/common.js'

export default {
  name: 'PrintReport',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      productList: [],
      formaterData,
      acceptType: '',
      bizmanTypeList: [], // 商家类别
      shopBizTypeOptions: [],
      shopTypeList: [], // 门店类型
      cityLevelList: [], // 城市级别
      marketLevelList: [], // 市场层级
      businessStatusList: [], // 门店营业状态
      bizTypeList: [], // 业务类型
      marketTypeList: [], // 报图类型
      constTypeList: [], // 门店建设类型
      constRangeList: [], // 门店建设范围,验收范围
      decorationFormList: [], // 装修形式
      checkScheduleList: [], // 验收进度
      checkStepList: [], // 验收步骤
      acceptList: [], // 验收结果
      detail: {},
      problemList: [],
      rectifyObj: {},
      formData: {},
      formRules: {
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {},
  async  created() {
    await getDictByPatchType(['DECORATION_BIZ_TYPE', 'BIZMAN_TYPE', 'SHOP_TYPE', 'CITY_LEVEL', 'MARKET_LEVEL', 'SHOP_BIZ_STATE', 'ACCEPT_RESULT',
      'BIZ_TYPE', 'MARKET_TYPE', 'CONST_TYPE', 'DECORATION_RANGE', 'DECORATION_FORM', 'DECORATION_SCHEDULE', 'SHOP_DECORATION_STEPS']).then(res => {
      this.bizmanTypeList = res.BIZMAN_TYPE // 商家类别
      this.shopBizTypeOptions = res.DECORATION_BIZ_TYPE
      this.shopTypeList = res.SHOP_TYPE // 门店类型
      this.cityLevelList = res.CITY_LEVEL // 城市级别
      this.marketLevelList = res.MARKET_LEVEL // 市场层级
      this.businessStatusList = res.SHOP_BIZ_STATE // 门店营业状态
      this.bizTypeList = res.BIZ_TYPE // 业务类型
      this.marketTypeList = res.MARKET_TYPE // 报图类型
      this.constTypeList = res.CONST_TYPE // 门店建设类型
      this.constRangeList = res.DECORATION_RANGE // 门店建设范围,验收范围
      this.decorationFormList = res.DECORATION_FORM // 装修形式
      this.checkScheduleList = res.DECORATION_SCHEDULE// 验收进度
      this.checkStepList = res.SHOP_DECORATION_STEPS // 验收步骤
      this.acceptList = res.ACCEPT_RESULT// 验收结果
    })
    this.getDetail()
  },
  methods: {
    formateTime(data) {
      if (!data) return ''
      return data.substring(0, 10)
    },
    handlerOrg(data) {
      if (!data) return ''
      return data.map(row => row.orgName).join(',')
    },
    getDetailFunc() {
      const { id, type } = this.$route.query
      this.acceptType = type
      if (type === 'HARD') {
        getProblemDetailList(id, 'HARD').then(res => {
          this.problemList = res.data// 软装或者硬装验收
        })
      } else if (type === 'SOFT') {
        getSoftProblemList(id).then(res => {
          const data = res.data.filter(v => v.acceptType.toUpperCase() === 'SOFT')
          if (data.length === 0) {
            getDutyAndProblemlist().then(res => {
              this.problemList = res.data.filter(e => e.acceptType.toUpperCase() === 'SOFT')// 软装或者硬装验收
            })
          } else {
            this.problemList = data
          }
        })
      } else if (type === 'rectify') { // 软装整改指令单
        getSoftProblemList(id).then(res => {
          const data1 = res.data.filter(v => v.acceptType.toUpperCase() === 'SOFT')
          let tempData = []
          if (data1.length === 0) {
            getDutyAndProblemlist().then(res => {
              const data2 = res.data.filter(e => e.acceptType.toUpperCase() === 'SOFT')
              tempData = data2
            })
          } else {
            tempData = data1
          }

          if (tempData.length > 0) {
            const obj1 = tempData.filter(v => v.belongDuty === '经销商责任')
            const obj2 = tempData.filter(v => v.belongDuty === '公司责任')
            const newProblemList = []
            if (obj1.length === 1 || obj2.length === 1) {
              this.$set(this.rectifyObj, 'actualAcceptTime', (obj1 && obj1[0].actualAcceptTime) || (obj2 && obj2[0].actualAcceptTime))
              this.$set(this.rectifyObj, 'mustRectifyEndTime', (obj1 && obj1[0].mustRectifyEndTime) || (obj2 && obj2[0].mustRectifyEndTime))
              if (!obj1 || !obj2) return
              obj1[0].problemDetailDTOList.forEach(v => {
                obj2[0].problemDetailDTOList.forEach(i => {
                  if ((i.problemClass === v.problemClass) && (i.haveProblem || v.haveProblem)) {
                    if (i.problemDesc || v.problemDesc) {
                      newProblemList.push({ problemClass: v.problemClass, agencyProblemDesc: v.haveProblem ? v.problemDesc : '无', companyProblemDesc: i.haveProblem ? i.problemDesc : '无' })
                    }
                  }
                })
              })
            }

            this.$set(this.rectifyObj, 'newProblemList', newProblemList)
          }
        })
        searchBizAccount(this.detail.clientCode, '').then(res => {
          if (res.success && res.data.records.length > 0) {
            searchManagerAccount(res.data.records.map(v => v.code).join(',')).then(response => {
              response.data.records.forEach(i => {
                if (i.mgrType === '1') this.$set(this.rectifyObj, 'name1', i.name)
                if (i.mgrType === '2') this.$set(this.rectifyObj, 'name2', i.name)
              })
            })
          }
        })
      }
      searchDesignTime(this.detail.constCode).then(res => {
        if (res.data.records.length > 0) {
          const data = res.data.records[0]
          this.$set(this.detail, 'passingDate', data.passingDate)
          this.$set(this.detail, 'completeTime', data.completeTime)
        }
      })
    },
    async getDetail() {
      const { id, type } = this.$route.query
      if (type === 'SOFT' || type === 'rectify') {
        await getSoftDetail(id).then(res => {
          this.detail = res.data
        })
      } else {
        await getApplyDetail(id).then(res => {
          this.detail = res.data
        })
      }
      this.getDetailFunc()
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      this.formData = {}
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 提交表单处理
    submitForm() {
      this.$prompt('请输入文件名', '文件名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputErrorMessage: '文件名不能为空且不支持特殊字符',
        inputValidator: value => {
          if (value === '' || value === undefined || value === null) {
            return '请输入文件名'
          }
          return true
        }
      }).then(({ value }) => {
        if (this.$route.query.type === 'rectify') {
          this.$html2pdf('rectify-pdf', value || '整改指令单').then(res => {
            this.$message.success('生成整改指令单成功！')
          }).catch(() => {
            this.$message.warning('生成整改指令单失败！')
          })
        } else {
          this.$html2pdf('test-pdf', value || '验收报告').then(res => {
            this.$message.success('生成验收报告成功！')
          }).catch(() => {
            this.$message.warning('生成验收报告失败！')
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.bgc{
  background-color:rgb(245, 245, 245)
}
th{
  font-size: 20px;
}
tr{
  height: 50px;
}
td{
  font-size: 22px;
}
.row_data{
  display: inline-block;
}
.problem_box{
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;

}
table {
    border-collapse: collapse;
}
table,
table tr th,
table tr td {
    border: 1px solid #000;
    // padding: 5px 10px;
}
/deep/.el-table .cell{
  font-size: 18px;
  color: #000;
}
/deep/.el-table td {
    border-bottom: 1px solid #000 !important;
}
/deep/ .el-table--border td {
    border-right: 1px solid #000 !important;
}
/deep/.el-table--border th, .el-table--border td {
    border-right: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
}
/deep/.el-table--border, .el-table--group {
    border: 0px solid ;
}
/deep/.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 28px;
    padding: 5px;
}
</style>
